
<template>
  <div class="coupon_detail-container">
    <breadcrumb style></breadcrumb>
    <img src="../../img/return_icon.png" alt @click="$router.go(-1)">

    <div class="content">
      <el-main>
        <el-collapse v-model="activeName">
          <el-collapse-item title="优惠券名称" name="1">
            <el-form label-width="80px">
              <el-form-item label="名称">{{name}}</el-form-item>
              <!-- <el-form-item label="创建时间">{{createtime}}</!--> 
              <!-- <el-form-item label="状态">{{type}}</el-form-item> -->
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="优惠券面额" name="2">
            <el-form label-width="80px">
              <el-form-item>{{price}} &nbsp;&nbsp;元</el-form-item>
              <el-form-item label="满减限制  满">
                {{threshold}} &nbsp;
                <span style="font-weight: 600">元可用</span>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="优惠券类型" name="3">
            <el-form>
              <el-form-item label="优惠券类型"></el-form-item>
            </el-form>
            <p>{{couponName}}</p>
            <div class="mry" v-if="ry">
              <div class="mry_one" v-for="(item, index) in checkList5" :key="index">
                <span style="color: #303133;">
                    <i class="el-icon-caret-bottom"></i>&nbsp;
                    {{item.label}}
                  </span>
                  <div class="goodsTypes">
                    <div v-for="(item1, index1) in item.typeList" @click="xiangq()" style="color: #409eff;" :key="index1">
                      {{item1.label}}
                      <span>({{item1.store}})</span>
                    </div>
                  </div>
              </div>
            </div>

          </el-collapse-item>
          <el-collapse-item title="时间限制" name="4">
            <el-form label-width="80px">
              <el-form-item label="可用时间" v-if="limitKind == 1">
                <span style="padding: 0 20px">{{startTime}}</span>
                <span style="color: #000;font-weight: 600">------</span> &nbsp;
                <span style="padding: 0 20px">{{endTime}}</span>
              </el-form-item>
              <el-form-item label="无时间限制" v-else>

              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </el-main>
    </div>
  </div>
</template>


<script>
import breadcrumb from "../../components/breadcrumb";
import { coupon_detail, coupon_type_detail } from "../../api/getData.js";
export default {
  components: { breadcrumb },
  data() {
    return {
      activeName: ["1", "2", "3", "4", "5"],
      textarea: "",
      id: this.$route.query.id,
      name: "",
      createtime: "",
      startTime: "",
      threshold: "",
      endTime: "",
      source: "",
      price: "",
      couponId: "",
      couponName: "",
      type:'',
      limitKind:'',
      ry:false,
      shuj:"",
      checkList5: [
        { id: 1,  label: "平台商城", typeList: [] },
        { id: 2,  typeList: [], label: "七折拼团" },
        { id: 3, typeList: [],  label: "五折拼团" },
        { id: 4, typeList: [], label: "9.9折拼团" },
        { id: 6 , typeList: [],label: "十单免一" },
        { id: 12, typeList: [],label: "限时秒杀" },
        { id: 11, typeList: [],label: "新人免费拿" },
        { id: 10, typeList: [],label: "新人专区" }
      ]
    };
  },
  created() {
    this.get_detail();
  },
  methods: {
    xiangq(){
      this.$router.push('/couponxq?id='+this.shuj)
    },
    get_detail() {
      let data = "id=" + this.id;
      coupon_detail(data).then(result => {
        if (result.data.status == 0) {
          if(result.data.data.types==5){
            this.shuj=result.data.data.couponTypeDetailVo.goodses[0].goodsId
          }
          let data = result.data.data;
          this.name = data.name;
          this.createtime = data.createtime;
          this.price = data.price;
          this.threshold = data.threshold;
          this.startTime = data.startTime;
          this.endTime = data.endTime;
          this.limitKind = data.limitKind
          if (data.source == 1) {
            this.source = "手动创建";
          } else {
            this.source = "自动创建";
          }
          this.couponId = data.typeId;
          this.textarea = data.note;
          if(data.type == 0){
            this.type = '已过期'
          } else if(data.type == 1){
            this.type = '可使用'
          } else {
            this.type = '未开始'
          }
          // this.get_coupon();
          //console.log(data.types)
          if(data.types==1){
            this.couponName="全场通用"
          }else if(data.types==2){
            this.couponName="部分活动通用"
          }else if(data.types==3){
            this.couponName="部分商品类型通用"
          }else if(data.types==4){
            this.couponName="部分活动商品类型通用"
          }else if(data.types==5){
            this.couponName="部分商品可用"
            this.ry=true
          }
          //console.log(result.data.data.couponTypeDetailVo.goodses)
          var sjs=result.data.data.couponTypeDetailVo.goodses
          sjs.forEach(ites=>{
            this.checkList5.forEach(ite1 =>{
              if(ites.promotionId==ite1.id){
                ite1.typeList.push({label:ites.goodsTypeName,store:ites.store})
              }
            })
          })
        }
      });
    },
    get_coupon() {
      let data = "id=" + this.couponId;
      coupon_type_detail(data).then(result => {
        if (result.data.status == 0) {
          this.couponName = result.data.data.name;
        }
      });
    }
  }
};
</script>



<style lang="less">
.coupon_detail-container {
  @import "../../style/card.less";
  display: flex;
  flex-flow: column;
  height: 100%;
  position: relative;
  > img {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
    right: 40px;
    z-index: 99;
    cursor: pointer;
  }
  .mry{
    display: flex;
    padding-left: 25px;
    margin-top: 20px;
    flex-wrap: wrap;
    .mry_one{
      width: 130px;
      margin-right: 10px;
      .goodsTypes{
        padding-left: 35px;
        box-sizing: border-box;
      }
    }
  }
  .el-collapse-item{
    &:nth-of-type(3) {
      p {
        margin-left: 30px;
        margin-top: 10px;
        display: inline-block;
      }
      span:last-of-type {
        color: #409eff;
        margin-left: 10px;
        cursor: pointer;
      }
      .el-collapse-item__wrap {
        margin-bottom: 15px;
      }
    }
    &:nth-of-type(4) {
      .el-form {
        width: 600px;
        .el-form-item {
          width: 600px !important;
        }
      }
      .el-form-item__content {
        width: 460px;
        .el-input__inner {
          width: 195px !important;
        }
        .el-input__icon.el-icon-time {
          line-height: 30px;
        }
      }
    }
    &:nth-of-type(6) {
      .el-form-item {
        width: 330px !important;
        height: 90px;
        .el-textarea__inner {
          height: 90px;
        }
      }
    }
  }
}
</style>
